@import 'base.less';
#sidebar {
    background-color: rgb(50, 65, 87);
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    .ul_::-webkit-scrollbar {
        width: 0;
    }
    .ul_ {
        height: 100%;
        overflow-y: scroll;
        .el-menu--collapse {
            width: 64px;
        }
        .sidebar-el-menu:not(.el-menu--collapse) {
            width: 200px;
        }
    }
    ul {
        li {
            i.my-icon {
                width: 20px;
                height: 20px;
                margin-right: 5px;
                display: inline-block;
                background-size: 100% 100%;
                &.role {
                    background-image: url(../assets/menuIcon/role_nor.png);
                }
                &.customer {
                    background-image: url(../assets/menuIcon/customer_nor.png);
                }
                &.supportstaff {
                    background-image: url(../assets/menuIcon/trafficker_nor.png);
                }
                &.user {
                    background-image: url(../assets/menuIcon/user_nor.png);
                }
                &.project {
                    background-image: url(../assets/menuIcon/productlist_nor.png);
                }
                &.price {
                    background-image: url(../assets/menuIcon/price_nor.png);
                }
                &.system {
                    background-image: url(../assets/menuIcon/system_nor.png);
                }
                &.info {
                    background-image: url(../assets/menuIcon/info_nor.png);
                }
                &.subjectmatter {
                    background-image: url(../assets/menuIcon/subjectmatter_nor.png);
                }
                &.freight {
                    background-image: url(../assets/menuIcon/freight_nor.png);
                }
                &.place {
                    background-image: url(../assets/menuIcon/place_nor.png);
                }
                &.order {
                    background-image: url(../assets/menuIcon/order_nor.png);
                }
                &.timeprice {
                    background-image: url(../assets/menuIcon/timeprice_nor.png);
                }
                &.company {
                    background-image: url(../assets/menuIcon/company_nor.png);
                }
                &.onlineservice {
                    background-image: url(../assets/menuIcon/onlineservice_nor.png);
                }
            }
            &.is-active {
                i.my-icon {
                    &.customer {
                        background-image: url(../assets/menuIcon/customer.png);
                    }
                    &.role {
                        background-image: url(../assets/menuIcon/role.png);
                    }
                    &.supportstaff {
                        background-image: url(../assets/menuIcon/trafficker.png);
                    }
                    &.user {
                        background-image: url(../assets/menuIcon/user.png);
                    }
                    &.project {
                        background-image: url(../assets/menuIcon/productlist.png);
                    }
                    &.price {
                        background-image: url(../assets/menuIcon/price.png);
                    }
                    &.system {
                        background-image: url(../assets/menuIcon/system.png);
                    }
                    &.info {
                        background-image: url(../assets/menuIcon/info.png);
                    }
                    &.subjectmatter {
                        background-image: url(../assets/menuIcon/subjectmatter_nor.png);
                    }
                    &.freight {
                        background-image: url(../assets/menuIcon/freight.png);
                    }
                    &.place {
                        background-image: url(../assets/menuIcon/place.png);
                    }
                    &.order {
                        background-image: url(../assets/menuIcon/order.png);
                    }
                    &.timeprice {
                        background-image: url(../assets/menuIcon/timeprice.png);
                    }
                    &.company {
                        background-image: url(../assets/menuIcon/company.png);
                    }
                    &.onlineservice {
                        background-image: url(../assets/menuIcon/onlineservice.png);
                    }
                }
            }
        }
    }
    .slideIn {
        position: absolute;
        left: calc(100% - 1px);
        top: 50%;
        width: 10px;
        height: 76px;
        transform: translateY(-50%);
        z-index: 11;
        height: 80px;
        border: 1px solid @base_color;
        color: @base_color;
        font-weight: bold;
        border-radius: 0 9px 9px 0;
    }
    .is-active {
        span {
            color: @base_color;
        }
    }
}